<div class="container gray-background">
  <header #header>
    <!-- <i class="back" (click)="goBack()"></i> -->
    <p>选择城市</p>
  </header>

  <div class="nav" #nav>
    <nav class="seed-underline">
      <p [class.active]="currentTab==='province'"  (click)="currentTab='province'">{{currentCity.provinceName||'请选择'}}</p>
      <p [class.active]="currentTab==='city'" (click)="currentTab='city'" *ngIf="citys.length>0">{{currentCity.cityName||''}}</p>
      <p [class.active]="currentTab==='district'" (click)="currentTab='district'" *ngIf="districts.length>0">{{currentCity.districtName||''}}</p>
    </nav>
  </div>
  <div class="content" #content id="content">
    <ul class="provinces">
      <li *ngFor="let province of provinces"
          [class.active]="province.areaId===currentCity.provinceId"
          (click)="pickProvince(province)">
        {{province.title}}
        <!-- {{province.areaId}} -->
      </li>
    </ul>
    <ul class="city" [class.show]="currentTab==='city'">
      <li *ngFor="let city of citys"  [class.active]="city.areaId===currentCity.cityId" (click)="pickCity(city)">
        {{city.title}}
        <!-- {{city.areaId}} -->
      </li>
    </ul>
    <ul class="district" [class.show]="currentTab==='district'">
      <li *ngFor="let district of districts"  [class.active]="district.areaId===currentCity.districtId" (click)="pickDistrict(district)">
        {{district.title}}
        <!-- {{district.areaId}} -->
      </li>
    </ul>
  </div>
</div>
